import React, { Component } from 'react'
import { connect } from 'react-redux'
import { findDOMNode } from 'react-dom'
import QaItem from './qaItem'
import { QaAction } from '../../actions'
import { EventCenter, Data, Type } from '../../utils/Global'

class QaList extends Component {
  isScrollToBottom = false
  isListAdded = false
  isLikeLastMsg = false
  renderItem() {
    const { list } = this.props
    const ls = []
    list.map((item, index) => {
      ls.push(
        <QaItem item={item} key={index} index={index} />
      )
    })
    return ls
  }
  handleScrollBottomEvent = () => {
    this.scrollToBottom()
  }
  scrollToBottom = () => {
    const clientHeight = this.listDiv.clientHeight
    const scrollTop = this.listDiv.scrollTop
    const scrollHeight = this.listDiv.scrollHeight
    this.listDiv.scrollTop = scrollHeight - clientHeight + 10
  }
  componentWillReceiveProps(prps) {
    const { list } = this.props
    const { list: nowList } = prps
    if (list.length === nowList.length && list.length > 0) {
      let lastMsg = list[list.length - 1], lastNowMsg = nowList[nowList.length - 1]
      if (lastMsg.type === lastNowMsg.type) {
        if (lastMsg.type === Type.COMMON_TYPE.COMMON_QA_QUESTION) {
          if (lastMsg.data.question.users.length === 0 && lastNowMsg.data.question.users.length > 0) {
            this.isLikeLastMsg = true
          } else {
            this.isLikeLastMsg = false
          }
        }
        if (lastMsg.type === Type.COMMON_TYPE.COMMON_QA_ANSWER) {
          if (lastMsg.data.answer.users.length === 0 && lastNowMsg.data.answer.users.length > 0) {
            this.isLikeLastMsg = true
          } else {
            this.isLikeLastMsg = false
          }
        }
      }
    }
    if (nowList.length > list.length) {
      this.isListAdded = true
    } else {
      this.isListAdded = false
    }
  }
  componentDidMount() {
    EventCenter.addListener('qa_list_scroll_bottom', this.handleScrollBottomEvent)
    this.setWidth()
    this.scrollToBottom()
  }
  componentDidUpdate() {
    this.setWidth()
    const { dispatch, list } = this.props
    const { updateNewMsgCount } = QaAction
    if (this.isLikeLastMsg && this.isScrollToBottom) {
      this.scrollToBottom()
    }
    if (!this.isListAdded) {
      return
    }
    if (list.length > 0 && list[list.length - 1].sender.id === Data.user.id) {
      this.scrollToBottom()
      return
    }
    if (this.isScrollToBottom) {
      this.scrollToBottom()
    } else {
      dispatch(updateNewMsgCount(false))
    }

    // this.scrollToBottom()
  }
  componentWillUpdate() {
    const clientHeight = this.listDiv.clientHeight
    const scrollTop = this.listDiv.scrollTop
    const scrollHeight = this.listDiv.scrollHeight
    if (scrollHeight <= clientHeight + scrollTop + 10) {
      this.isScrollToBottom = true
    } else {
      this.isScrollToBottom = false
    }
  }
  componentWillUnmount() {
    EventCenter.removeListener('qa_list_scroll_bottom', this.handleScrollBottomEvent)
  }
  checkIsInBottom() {
    const clientHeight = this.listDiv.clientHeight
    const scrollTop = this.listDiv.scrollTop
    const scrollHeight = this.listDiv.scrollHeight
    if (scrollHeight <= (clientHeight + scrollTop + 5)) {
      return true
    }
    return false
  }
  onScroll = () => {
    const clientHeight = this.listDiv.clientHeight
    const scrollTop = this.listDiv.scrollTop
    const scrollHeight = this.listDiv.scrollHeight
    const { dispatch } = this.props
    const { updateNewMsgCount } = QaAction
    if (scrollHeight <= (clientHeight + scrollTop + 5)) {
      dispatch(updateNewMsgCount(true))
    }
  }
  setWidth = () => {
    return
    const windowWidth = document.body.clientWidth
    const width = windowWidth > 700 ? 700 : windowWidth
    const clientHeight = this.listDiv.clientHeight
    const scrollHeight = this.listDiv.scrollHeight
    if (scrollHeight > clientHeight) {
      findDOMNode(this.listDiv).style.width = width + 18 + 'px'
    } else {
      findDOMNode(this.listDiv).style.width = width + 'px'
    }
  }
  render() {
    return (
      <div onScroll={this.onScroll} className="qa_list" ref={r=>this.listDiv=r}>
        {this.renderItem()}
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    list: state.QaListState.list
  }
}

export default connect(mapStateToProps)(QaList)
